<template>
 <div class="body">
      <div class="all" v-for="i in 4" :key="i">
      <div class="tiaozhanjin"><span>￥10.00</span></div>
      <img class="imgclass" src="@/assets/风景.png" alt="" />

      <div class="content">每天早起学习</div>
      <div class="date">2021-2-12</div>
      <div class="jingdu">进度2/71</div>
      <el-avatar
        class="avatar"
        size="small"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>

      <div class="name">name</div>
      <el-button class="btn" size="small" type="warning" round
        >立刻围观</el-button
      >
    </div>
     </div>
</template>
<style scoped>
.body {
  display: flex;
  flex-wrap: wrap;

}
.all {
  position: relative;
  width: 240px;
  height: 280px;
  margin-left: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
.imgclass {
  width: 240px;
  height: 220px;
  object-fit: contain;
}
.jingdu {
  font-size: 12px;
  position: absolute;
  color: #ffd41a;
  background: #000000;
  opacity: 0.8;
  border-radius: 5px;
  width: 60px;
  left: 179px;
  bottom: 260px;
}
.content {
  position: absolute;
  font-size: 12px;
  left: 10px;
}
.date {
  position: absolute;
  font-size: 10px;
  left: 180px;
  bottom: 40px;
}
.avatar {
  position: absolute;
  right: 210px;
  top: 240px;
}
.tiaozhanjin {
  position: absolute;
  font-size: 11px;
  color: #ffd41a;
  background: #000000;
  opacity: 0.8;
  border-radius: 5px;
  left: 5px;
  top: 5px;
}
.name {
  position: absolute;
  font-size: 11px;
  left: 40px;
  bottom: 15px;
}
.btn {
  font-size: 10px;
  position: absolute;
  left: 165px;
  top: 245px;
}
</style>